<template>
  <div class="login">
    <RollbackBarView :to="'/'" :title="'登录'" />
    <div class="login-box">
      <div class="user">
        <span>手机</span>
        <div class="phone">
          <input v-model="acc" type="Number" placeholder="请输入手机号码" />
        </div>
      </div>
      <div class="pwd-box">
        <span>密码</span>
        <div class="pwd">
          <input v-model="pwd" type="password" placeholder="请输入密码" />
        </div>
      </div>
      <p class="warn" v-if="warn">
        <van-icon name="clear" /> 请输入用户名或密码
      </p>
      <div class="login-btn" @click="login">登录</div>
      <div class="reg" @click="cutReg">注册</div>
    </div>
  </div>
</template>

<script>
import RollbackBarView from "./RollbackBarView.vue";

export default {
  data() {
    return {
      acc: "",
      pwd: "",
      warn: false,
    };
  },
  watch: {
    acc() {
      if (this.acc != "") {
        this.warn = false;
      }
    },
    pwd() {
      if (this.pwd != "") {
        this.warn = false;
      }
    },
  },
  inject: ["getUser"],
  methods: {
    cutReg() {
      this.$emit("cutReg", 1);
    },
    login() {
      if (this.acc == "" || this.pwd == "") {
        this.warn = true;
      } else {
        this.$http
          .post("http://192.168.27.59/login", {
            acc: this.acc,
            pwd: this.pwd,
          })
          .then(({ data }) => {
            console.log(data);
            if (data.code == 200) {
              this.$emit("cutReg", 200);
              window.localStorage.setItem("code", 200);
              window.localStorage.setItem(
                "userInfo",
                JSON.stringify({
                  userId: data.data.userId,
                  usernm: data.data.nm,
                  useracc: data.data.acc,
                })
              );
              this.$toast.success(data.message);
              this.$router.replace({ name: "user" });
              this.getUser();
            } else {
              this.$toast.fail(data.message);
            }
          });
      }
    },
  },
  components: { RollbackBarView },
};
</script>

<style lang="scss" scoped>
.login {
  background-color: #fff;
  width: 100vw;
  .login-box {
    padding: 6vmin;
    box-sizing: border-box;

    .user,
    .pwd-box {
      margin-bottom: 1.25rem;
      span {
        font-size: 0.875rem;
      }
      div {
        height: 8vmin;
        margin: 0.375rem 0;
        input {
          width: 100%;
          height: 100%;
          border: none;
          background-color: #f4f4f4;
          border-radius: 0.625rem;
          padding: 0 0.625rem;
          box-sizing: border-box;
          font-size: 14px;
        }
      }
    }
    .warn {
      font-size: 14px;
      color: red;
      margin-bottom: 10px;
      line-height: 14px;
    }
    .login-btn {
      width: 100%;
      height: 1.875rem;
      background-color: black;
      border-radius: 0.625rem;
      text-align: center;
      color: #fff;
      line-height: 1.875rem;
    }
    .reg {
      width: 100%;
      height: 1.875rem;
      border-radius: 0.625rem;
      text-align: center;
      line-height: 1.875rem;
      margin-top: 0.5rem;
      border: 1px solid rgba($color: #000000, $alpha: 0.1);
    }
  }
}
</style>
